<template>
  <div class="dt-login w-full h-full relative overflow-hidden">
    <div class="dt-login-layer w-110 h-full float-right bg-white relative">
      <div class="absolute inset-0 m-auto h-120 px-16">
        <div class="text-center pb-4 header">
          <img :src="LogoUrl" class="inline mr-1" />
          <span class="inline align-middle">前端框架</span>
        </div>

        <h2 class="leading-15 font-bold text-xl tracking-widest">登录</h2>
        <div class="mark-bar-content mb-5 h-0 w-11 border-opacity-0 border-solid border-r-4"></div>
        <LoginForm />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import LogoUrl from '@assets/imgs/login/logo.png'
import LoginForm from './components/login-form.vue'
</script>

<style lang="less">
.mark-bar-content {
  border-top-color: @primary-color;
  border-top-width: 6px;
  border-top-style: solid;
}

.dt-login{
  width: 100%;
  height: 100%;
  background-image: url('@assets/imgs/login/login-bg.jpg');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;

  .header{
    img{
      width: 110px;
    }
    span{
      line-height: 40px;
      font-size: 22px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>

<route lang="yaml">
meta:
  title: '登录'
  requiresAuth: false
</route>
